import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import { resolve } from 'path'
import { docsBase } from '../docs/.vuepress/buildConfig'

export default defineConfig(({ command }) => ({
  root: resolve(process.cwd(), 'demo'),

  base: command === 'serve' ? '/' : `${docsBase}demo/`,

  resolve: {
    // 路径别名
    alias: {
      '@': resolve(__dirname, '../src'),
      'fdd-contract': resolve(__dirname, '../src')
    }
  },

  build: {
    outDir: '../docs/.vuepress/dist/demo',

    /**
     * 指定 CSS 构建目标，避免 `rgba()` 被转换成 `#RGBA`
     * 参考: https://vitejs.dev/config/#build-csstarget
     */
    cssTarget: ['chrome61'],

    sourcemap: true,

    rollupOptions: {
      output: {
        // 合同控件分包
        manualChunks: filePath => {
          if (filePath.includes('src')) {
            return 'fdd-contract'
          }
        }
      }
    }
  },

  esbuild: {
    // jsx 支持
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  },

  plugins: [vue()],

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "sass:math";
          @import "../src/css/global.scss";
        `
      }
    }
  }
}))
